<template>
  <div style="width: 100%; height: 100%">
    <div
      style="
        text-align: right;
        font-size: 12px;
        border-bottom: 1px solid #ccc;
        color: #333;
        line-height: 60px;
      "
    >
      <el-input
        class="ml-5"
        style="width: 200px"
        placeholder="请输入员工号"
        suffix-icon="el-icon-search"
        v-model="id"
      ></el-input>

      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button class="ml-5" type="warning" @click="reset">重置</el-button>
    </div>

    <el-main style="padding: 10px 0px">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{
          textAlign: 'center',
          height: '40px',
        }"
        :row-style="{ height: '60px' }"
      >
        <el-table-column prop="id" label="员工号" width="140"></el-table-column>

        <el-table-column prop="reason" label="原因"> </el-table-column>
        <el-table-column prop="makeTime" label="发起时间"> </el-table-column>
        <el-table-column prop="startTime" label="起始时间"> </el-table-column>
        <el-table-column prop="endTime" label="结束时间"> </el-table-column>
        <el-table-column label="时长">
          <template slot-scope="scope"> {{ scope.row.duration }}天 </template>
        </el-table-column>
        <el-table-column label="审批结果">
          <template slot-scope="scope">{{
            scope.row.post == 1 ? "通过" : "未通过"
          }}</template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-main>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      department: "",
      job: "",
      name: "",
      id: "",
      makeTime: "",
      post: 0,
      dialogFormVisible: false,
      adminFrom: {},
    };
  },
  methods: {
    load() {
      this.request
        .get("/AskLeave/historyPage", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name,
            id: this.id,
            makeTime: this.makeTime,
            post: this.post,
          },
        })
        .then((req) => {
          this.tableData = req.records;
          this.total = req.total;
        });
    },
    reset() {
      (this.id = ""), (this.name = ""), this.load();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    changAdminInfo(row) {
      this.adminFrom = row;
      this.dialogFormVisible = true;
    },
    openToSave() {
      (this.dialogFormVisible = true), (this.adminFrom = []);
    },
  },
  created() {
    this.load();
  },
};
</script>
<style>
.el-header {
  /* background-color: #b3c0d1; */
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
